<template>
	<div class="bg-bg-1">
		<n-form
			ref="formRef"
			:model="formValue"
			:rules="formRules"
			label-placement="top"
			size="large"
			class="w-[320px] mx-[35px]"
			:show-feedback="true">
			<n-form-item label="用户名" path="input">
				<!--				class="relative" feedback-class="absolute -top-[24px] right-[100%] bg-[white]"-->
				<n-popover
					trigger="manual"
					:show="showPopover"
					placement="left"
					style="
						--n-padding: 8px 12px;
						--n-border-radius: 8px;
						--n-text-color: var(--color-text-6);
						--n-color: var(--color-white);
						--n-arrow-height: 8px;
						--n-space-arrow: 8px;
					">
					<template #trigger>
						<n-input
							v-model:value="formValue.input"
							clearable
							@focus="showPopover = true"
							@blur="showPopover = false" />
					</template>
					<div>
						<!--						<div>I wish they all could be California girls</div>-->
						<base-amount value="999.888" :currency="CurrencyFiatEnum.USD" />
						<div v-for="item in formRules.input as any[]" :key="item.message">
							<BaseTip name="correct" :text="item.message" />
						</div>
						<div
							v-for="(item, index) in formRules.input as any[]"
							:key="index"
							class="mt-[2px] flex items-center">
							<base-icon
								name="correct"
								:class="item.validator?.(item, formValue.input) ? 'text-success' : 'text-t-4'" />
							<base-text block class="ml-1" :text="item.message" />
						</div>
					</div>
				</n-popover>
				<!--				<template #feedback="dd">随便写点内容{{ dd }}</template>-->
			</n-form-item>
			<n-form-item label="邮箱 / 手机" path="phone">
				<n-input
					v-model:value="formValue.phone"
					clearable
					style="--n-height: 48px; --n-border-radius: 8px; --n-color: var(--color-bg-2)" />
			</n-form-item>
			<n-form-item label="密码">
				<n-input type="password" clearable show-password-on="click" loading>
					<template #clear-icon>
						<base-icon name="remove" size="20" />
					</template>
					<template #password-visible-icon>
						<base-icon name="open-eyes" size="20" />
					</template>
					<template #password-invisible-icon>
						<base-icon name="close-eyes" size="20" />
					</template>
				</n-input>
			</n-form-item>
			<n-form-item>
				<n-button type="primary" @click="handleSubmit">验证</n-button>
			</n-form-item>
		</n-form>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
	FormInst,
	FormRules,
	inputProps,
	NButton,
	NForm,
	NFormItem,
	NInput,
	NPopover
} from 'naive-ui'
import { BaseAmount, BaseIcon, BaseText, BaseTip } from '@/components/base'
import { CurrencyFiatEnum } from '@/enums'

defineProps({
	...inputProps
})

const formRef = ref<FormInst | null>(null)
const formValue = reactive({
	input: null,
	phone: null
})
const formRules = <FormRules>{
	input: [
		{
			required: true,
			message: '必填的',
			type: 'string',
			trigger: ['input', 'blur']
		},
		{
			message: '不能是1',
			trigger: ['input', 'blur'],
			validator: (_, value) => {
				const valid = value !== String(1)
				console.log(valid, _)
				return valid
			}
		},
		{
			message: '不能是2',
			trigger: ['input', 'blur', 'focus'],
			validator: (_, value) => {
				const valid = value !== String(2)
				console.log(valid, _)
				return valid
			}
		},
		{
			message: '必须包含@',
			trigger: ['input', 'blur'],
			validator: (_, value) => {
				const valid = String(value).includes('@')
				console.log(valid, _)
				return valid
			}
		}
	],
	phone: {
		required: true,
		message: '请填写手机号',
		type: 'string',
		trigger: ['input', 'blur']
	}
}

const showPopover = ref(false)

// const errors = ref({}) // 存储每个字段的验证错误信息
const handleSubmit = () => {
	// 手动验证表单并获取每个字段的验证结果

	formRef.value
		?.validate()
		.then((xx) => {
			console.log('xxx', xx)
			showPopover.value = false
		})
		.catch((errors) => {
			console.log(errors)
			showPopover.value = true
		})
}
</script>

<style scoped></style>
